<template>
  <div class="alarm-type">
    <div class="chart" id="alarmTypePie"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "AlarmType",
  data() {
    return {
      chart: null,
      highlightTimer: null,
      currentIndex: 0
    }
  },
  methods:{
    initChart(){
      this.chart = echarts.init(document.getElementById('alarmTypePie'))
      const option={
        color:['#6F45F3','#CD3EF2','#6ECDE5','#3256F3'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '报警类型占比',
            type: 'pie',
            radius: ['40%', '70%'],
            emphasis: {
              scale: true,
              scaleSize: 15,
              label: {
                show: true,
                fontSize: 22,
                fontWeight: 'bold',
                formatter: function (params) {
                  const data=params.data
                  return [`{a|${data.name}}`,`{d|${data.value}次} {${data.tendency==='↑'?'b':'c'}|${data.tendency + data.percent}%}`].join('\n')
                },
                rich:{
                  a:{
                    color:'#0AA7FF',
                    fontSize:22,
                    lineHeight:24,
                    fontWeight: 'bold'
                  },
                  b:{
                    color:'#EA0000',
                    fontSize:22,
                    fontWeight: 'bold'
                  },
                  c:{
                    color:'#1BBE6B',
                    fontSize:22,
                    fontWeight: 'bold'
                  },
                  d:{
                    color:'#fff',
                    fontSize:22,
                    lineHeight:24,
                    fontWeight: 'bold'
                  },
                }
              }
            },
            label: {
              show: true,
              color:'#fff',
              fontSize: 14,
              formatter: function (params) {
                const data=params.data
                return [`{a|${data.name}}`,`{d|${data.value}次} {${data.tendency==='↑'?'b':'c'}|${data.tendency + data.percent}%}`].join('\n')
              },
              rich:{
                a:{
                  color:'#0AA7FF',
                  fontSize:14,
                  lineHeight:20
                },
                b:{
                  color:'#EA0000',
                  fontSize:14
                },
                c:{
                  color:'#1BBE6B',
                  fontSize:14
                },
                d:{
                  color:'#fff',
                  fontSize:14,
                  lineHeight:20
                },
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 20
            },
            data:[
              {name:'巡逻发现',value:40,percent:20,tendency:'↑'},
              {name:'110电话报警',value:98,percent:10,tendency:'↓'},
              {name:'上门报警',value:32,percent:5,tendency:'↑'},
              {name:'其他报警',value:15,percent:0,tendency:''},
            ]
          }
        ]
      }
      this.chart.setOption(option)
      
      // 开始高亮动画
      this.startHighlightAnimation()
    },
    startHighlightAnimation() {
      this.highlightTimer = setInterval(() => {
        // 取消之前的高亮
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        })
        
        // 高亮当前扇区
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.currentIndex
        })
        
        // 更新索引
        this.currentIndex = (this.currentIndex + 1) % 4
      }, 2000) // 每2秒切换一次
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.highlightTimer) {
      clearInterval(this.highlightTimer)
    }
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>
<style scoped lang="scss">
.alarm-type{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 100%;
  }
}
</style>
